<script lang="ts" setup>
import { ref, Ref } from 'vue'
const pic1 = "https://shq.qdjqy.cn/profile/0911/index/pic1.png"
const pic2 = "https://shq.qdjqy.cn/profile/0911/index/pic2.png"
const pic3 = "https://shq.qdjqy.cn/profile/0911/index/pic3.png"
const pic4 = "https://shq.qdjqy.cn/profile/0911/index/pic4.png"
const pic5 = "https://shq.qdjqy.cn/profile/0911/index/pic5.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

function jump(url: string) {
  uni.navigateTo({ url });
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '全部' },
  { title: '综合排序' },
  { title: '游玩主题' },
  { title: '景区级别' }
])

function handleChange(event: any) {
  tab.value = event.index;
}

interface Coupon {
  id: number,
  image: string,
  title: string,
  time: string,
  count: number,
  price: number
}

// normal 待出游、 used 已出游 、 cancel 已取消
const reservedList = reactive<Coupon[]>([
  { id: 1, image: pic1, title: '机遇时空X-META全感VR乐园', time: '10:00-22:00', count: 1, price: 109},
  { id: 2, image: pic2, title: '青岛融创水世界（山东融创5选1）', time: '10:00-22:00', count: 2, price: 309},
  { id: 3, image: pic3, title: '山东文旅·红叶柿岩旅游区', time: '10:00-22:00', count: 2, price: 99},
  { id: 4, image: pic4, title: '济南融创乐园（山东融创5选1）', time: '10:00-22:00', count: 2, price: 101},
  { id: 5, image: pic5, title: '琅琊古城', time: '10:00-22:00', count: 2, price: 5},
  { id: 6, image: pic2, title: '青岛融创水世界（山东融创5选1）', time: '10:00-22:00', count: 2, price: 309},
  { id: 7, image: pic3, title: '山东文旅·红叶柿岩旅游区', time: '10:00-22:00', count: 2, price: 99},
  { id: 8, image: pic4, title: '济南融创乐园（山东融创5选1）', time: '10:00-22:00', count: 2, price: 101},
  { id: 9, image: pic5, title: '琅琊古城', time: '10:00-22:00', count: 2, price: 5}
])


</script>

<template>
  <view class="scenic-container">
    <view class="scenic-bg"></view>
    <wd-navbar left-text="景区列表" left-arrow @click-left="handleClickLeft" custom-class="wd-color"
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <view class="goodlist">
      <wd-tabs v-model="tab" @change="handleChange" 
        inactive-color="#6D2E19" color="#85523E" background="transparent">
        <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="`${item.title}`">
          <view class="cantent flex" v-for="(itm, idx) in reservedList" :key="idx" @click="jump('/pages/scenicDetail/index')">
            <image class="head_img" :src="itm['image']" mode="aspectFill"></image>
            <view class="right">
              <view class="good_tltle">{{itm['title']}}</view>
              <view class="good_time">开放时间：{{itm['time']}}</view>
              <view class="count">剩余{{itm['count']}}次</view>
              <view class="price">售价：￥{{itm['price']}}</view>
            </view>
            <wd-button type="error" size="small" custom-class="good_btn" @click.prevent="jump('/pages/reservedInfo/index')">立即预约</wd-button>
          </view>
          <view class="bottom_loading">已经到底啦~</view>
          <view style="height: 20rpx;"></view>
        </wd-tab>
      </wd-tabs>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.scenic-container {
  position: relative;
  & .scenic-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: linear-gradient(to bottom, #BF9763, #ffffff);
    height: 500rpx;
    width: 750rpx;
  }
  
  & .goodlist {
    & .cantent {
      width: 710rpx;
      margin: 20rpx 20rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 30rpx 20rpx 0 20rpx;
      box-sizing: border-box;
      position: relative;
      & .head_img {
        border-radius: 20rpx;
        width: 260rpx;
        height: 200rpx;
      }
      & .right {
        margin-left: 15rpx;
        width: 430rpx;
        height: 200rpx;
        position: relative;
        & .good_tltle {
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
          font-size: 30rpx;
          font-weight: 700;
        }
        & .good_time {
          margin-top: 10rpx;
          font-size: 28rpx;
          color: #aaa;
          line-height: 40rpx;
        }
        & .count {
          margin-top: 20rpx;
          font-size: 30rpx;
          color: #e60012;
          line-height: 40rpx;
        }
        & .price {
          margin-top: 10rpx;
          font-size: 30rpx;
          color: #aaa;
          line-height: 40rpx;          
        }
      }

      :deep() {
        .good_btn {
          margin-right: 15rpx;
          position: absolute;
          right: 15rpx;
          bottom: 0;
        }
      }
    }
    & .bottom_loading {
      width: 750rpx;
      text-align: center;
      line-height:80rpx;
      color: #aaa;
    }

  }

  :deep() {
    .wd-navbar__text  {
      color: #fff;
    }
    .wd-navbar__arrow {
      color: #fff;
    }
    .wd-tabs, .wd-tabs__nav {
      background: transparent !important;
    }
  }
}
</style>
